html, body { background: #000; margin: 0; padding:0;}
canvas { width: 100%; height: 100%; position: absolute; }
body>div{
    background: rgba(0,0,0,0);
}
/* Demo Buttons Style */
.codrops-demos {
    font-size: 0.8em;
    text-align:center;
    position:absolute;
    z-index:99;
    width:96%;
}

.codrops-demos a {
    display: inline-block;
    margin: 0.35em 0.1em;
    padding: 0.5em 1.2em;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    border-radius: 2px;
    font-size: 110%;
    border: 2px solid transparent;
    color:#fff;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
    border-color: #383a3c;
}
@keyframes fadeInLeft {
    from{
        left: 0;
        top: 0;
        opacity: 0;
        width: 0;
        margin-left: -400px;
    }
    to{
        left: 50%;
        margin-left: -200px;
        width: 400px;
        top: 25%;
        opacity: 1;
    }
}
@-webkit-keyframes fadeInLeft {
    from{
        left: 0;
        top: 0;
        opacity: 0;
        width: 0;
        margin-left: -400px;
    }
    to{
        left: 50%;
        margin-left: -200px;
        width: 400px;
        top: 25%;
        opacity: 1;
    }
}
.login-box{
    webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    background: rgba(158,30,24, .4);
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    padding: 15px;
    border-radius: 10px;
}
.login-box>h1{
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #D9B3E6;
}
.login-box>p{
    margin-bottom: 15px;
    position: relative;
    text-align: center;
}
.login-box>p>i{
    position: absolute;
    width: 34px;
    height: 32px;
    line-height: 32px;
    background: #A35015;
    top: 1px;
    border-radius: 3px 0 0 3px;
    color: #FFF2E9;
}
.login-box>p>input[type="text"], .login-box>p>input[type="password"]{
    padding-left: 42px;
    width: 240px;
    height: 34px;
    font-size: 16px;
    margin-left: -1px;
    background: rgba(0,0,0, .2);
    border: 1px solid #000;
    color: #D9B3E6;
}
.login-box>p>input[type="text"]:focus, .login-box>p>input[type="password"]:focus{
    border-color: #A35015;
}
.login-box>p>span{
    display: inline-block;
    width: 239px;
    padding-left: 1px;
    text-align: left;
    color: #D9B3E6;
}
.login-box>p>input[type="checkbox"]{
    vertical-align: middle;
}
.login-btn{
    width: 80px;
    height: 36px;
    font-size: 16px;
    line-height: 24px;
    border-color: #FE8103;
    background: #A35015;
    color: #D9B3E6;
}
.register-btn{
    width: 80px;
    height: 36px;
    font-size: 16px;
    line-height: 24px;
    border-color: #DDDDDD;
    /*background: #A35015;*/
    color: #D9B3E6;
}
.login-box>p>button:hover{
    background: #FDAA34;
    border-color: #FE8103;
    color: #ffffff;
}
.login-box>p>button:active{
    background: #FE8103;
    border-color: #FE8103;
}